﻿<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MooTools Demos - Element.Event.Pseudos</title>
	<link type="text/css" rel="Stylesheet" href="eleventpseudos.css" />
</head>
<body>

<h2>Only fires once:</h2>
<a href="#" id="clickOnce">Click me and I'll just fire once and no more!</a>

<h2><code>:alt</code> Pseudo</h2>

<p>Hold the <code>Alt</code> key and click a block to toggle the <code>.active</code> class.</p>

<div id="container" >
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

<h2>Multiple Pseudos</h2>

This demo uses the <code>keydown:relay(textarea):keys(enter):once</code> event:

<div id="multiplePseudoText">
	<textarea>Press the enter key</textarea>
</div>

<h2><code>:pause</code> Pseudo</h2>

<p>
	This Pseudo Event prevents the event function from firing immediately after
	every keystroke. <code>:pause</code> instead waits for a pause in keystrokes of
	a optional amount of time (in milliseconds) to pass before firing. This is for
	example very useful when you want to validate the field when the user is
	ready typing, or if you do some Requests in an efficient way.
</p>

<input id="pauseEvent" type="text">
<img src="spinner.gif" alt="Spinner" id="spinner">

	<script type="text/javascript" charset="utf-8" src="../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../src/'; </script>
	<script type="text/javascript" charset="utf-8" src="../../../src/demo/action/moo/events/eleventpseudos.js"></script>
</body>
</html>
